<template>
  <transition name="appicon-show">
    <div
      @dragend="dragEnd($event)"
      @dblclick="useOpenWin(props.iconInfo)"
      class="desktop-icon unselect"
      draggable="true"
      :style="{ left: `${iconInfo.layerX}px`, top: `${iconInfo.layerY}px` }"
      v-show="iconInfo.show"
    >
      <el-image
        v-if="iconInfo.id === 1 && !windowStore.recycleBin.length"
        class="img"
        :src="iconInfo.imgUrl"
        style="width: 40px; height: 40px"
        @contextmenu.prevent.stop="contextMenuClick(iconInfo.id)"
      />
      <el-image
        v-else-if="iconInfo.id === 1 && windowStore.recycleBin.length"
        class="img"
        :src="fullRecycleBin"
        style="width: 40px; height: 40px"
        @contextmenu.prevent.stop="contextMenuClick(iconInfo.id)"
      />
      <el-image
        v-else
        class="img"
        :src="iconInfo.imgUrl"
        style="width: 40px; height: 40px"
        @contextmenu.prevent.stop="contextMenuClick(iconInfo.id)"
      />
      <div class="name" >{{ iconInfo.name }}</div>
    </div>
  </transition>
  <!-- 右键菜单 -->
  <div
    v-if="iconInfo.contextMenu"
    class="context-cancel-panel"
    :style="{left:`${iconInfo.layerX!  + 35}px`,top:`${iconInfo.layerY! + 50}px`}"
  >
    <div @click="useOpenWin(props.iconInfo)">打开</div>
    <div v-if="iconInfo.id === 1" @click="removeRecycleBin">清空</div>
    <div v-else @click="deleteDesktopIcon(props.iconInfo.id)">删除</div>
    <div>重命名</div>
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue'
import { useWindowStore } from '@/store/window'

import { useOpenWin } from '@/hooks/use-open-win'

import fullRecycleBin from '@/assets/img/menuicon/full.png'

import { IIconInfo } from './type'
const props = defineProps({
  iconInfo: {
    type: Object as PropType<IIconInfo>,
    required: true
  }
})

const windowStore = useWindowStore()

// 拖拽移动图标位置
const dragEnd = (e: any) => {
  const index = windowStore.desktopIconList.findIndex(item => item.id === props.iconInfo.id)
  windowStore.desktopIconList[index].layerX = e.clientX - 35
  windowStore.desktopIconList[index].layerY = e.clientY - 50
  // 拖拽到回收站
  if (props.iconInfo.id !== 1 ) {
    // 找出回收位置
    const recycleBinIdx = windowStore.desktopIconList.findIndex(item => item.id === 1)
    // 回收站的上下左右边界X、Y
    const leftBorderX = windowStore.desktopIconList[recycleBinIdx].layerX
    const rightBorderX = (leftBorderX as number) + 70
    const topBorderY = windowStore.desktopIconList[recycleBinIdx].layerY
    const bottomBorderY = (topBorderY as number)+ 90
    //拖拽到回收站处
    if (e.clientX > leftBorderX! && e.clientX < rightBorderX! && e.clientY > topBorderY! && e.clientY < bottomBorderY) {
      windowStore.desktopIconList[index].show = false
      windowStore.recycleBin.push(windowStore.desktopIconList[index])
    }
  }
}

// 右键显示菜单
const contextMenuClick = (id: number) => {
  windowStore.desktopIconList.map((item, index) => {
    if (item.id === id) {
      windowStore.desktopIconList[index].contextMenu = true
    } else {
      windowStore.desktopIconList[index].contextMenu = false
    }
  })
}

// 清空回收站
const removeRecycleBin = () => {
  windowStore.recycleBin = []
}

//删除图标到回收站
const deleteDesktopIcon = (id: number) => {
  windowStore.desktopIconList.forEach((item, index) => {
    if (item.id === id) {
      windowStore.desktopIconList[index].show = false
      windowStore.recycleBin.push(windowStore.desktopIconList[index])
      return
    }
  })
}

</script>

<style lang="less" scoped>
.desktop-icon {
  display: inline-block;
  width: 70px;
  height: 90px;
  padding: 5px;
  border-radius: 5px;
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  &:hover {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.4);
    .name {
      overflow: visible;
      font-size: 10px;
      transition: all 0.4s ease-in-out;
      text-overflow: ellipsis !important;
      white-space: normal !important;
    }
  }

  .img {
    display: block;
    width: 40px;
    height: 40px;
    padding: 10px;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    border-radius: 8px;
  }
  .name {
    display: block;
    width: 60px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-weight: 500;
    font-size: 10px;
    color: #ffffff;
    text-shadow: #666 1px 2px 2px;
  }
}

// 右键菜单样式
.context-cancel-panel {
  width: 60px;
  height: 72px;
  position: absolute;
  z-index: 9999999;
  background-color: rgba(64, 158, 255, .6);
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 1px 2px -2px rgba(32, 32, 32,0.16),0px 3px 6px 0px rgba(32, 32, 32,0.19),0px 5px 12px 4px rgba(32, 32, 32,0.09);
  transition: all 0.4s ease-in-out;
  display: flex;
  flex-direction: column;

  div {
    width: 60px;
    height: 24px;
    line-height: 24px;
    font-size: 13px;
    text-align: center;
    color: #eee;

    &:hover {
      cursor: pointer;
      background-color: rgba(255, 0, 0, 0.8);
      transition: all 0.4s ease-in-out;
      border-radius: 10px;
    }
  }
}
</style>
